import { useMemo } from 'react';
import useMemoComparative from '../../hooks/use-memo-comparative';
import { DatePickerField } from '../interface';

const COLUMN_LAYOUT = ['year', 'month', 'day', 'hour', 'minute'];

export default function useColumnLayout(layout: string): DatePickerField[] {
	const columnsList = useMemo<DatePickerField[]>(() => {
		const output = layout
			.split(',')
			.map((v) => v.trim().toLowerCase())
			.filter((v) => COLUMN_LAYOUT.includes(v));

		return [...new Set(output)] as any;
	}, [layout]);

	return useMemoComparative<DatePickerField[], DatePickerField[]>(
		() => columnsList,
		columnsList,
		(p, n) => p.length === n.length && p.every((v, i) => v === n[i]),
	);
}
